<template>
  <el-card class="custom-card">
    <el-row>
      <el-col :span="4">
        <div class="carinfo">
          <div>
            <el-tag size="large" effect="dark" round>
              日期：{{ lefcarinfo?.date }}
            </el-tag>
          </div>
          <div>
            <el-tag size="large" effect="dark" round>
              车号：{{ lefcarinfo?.carnumber }}
            </el-tag>
          </div>
          <div>
            <el-tag size="large" effect="dark" round>
              雪橇号：{{ lefcarinfo?.skidnumber }}
            </el-tag>
          </div>
        </div>
      </el-col>
      <el-col :span="16">
        <div class="carlayout">
          <div class="top">
            <el-result :icon="rightrecord == 'good' ? 'success' : 'error'"></el-result>
          </div>
          <div class="img"></div>
          <div class="bottom">
            <el-result :icon="leftrecord == 'good' ? 'success' : 'error'"></el-result>
          </div>
        </div>
      </el-col>
      <el-col :span="4"></el-col>
    </el-row>
  </el-card>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { reqLine3LastRecord } from '@/api/rockpanel';
import { lefcarinfo, rightcarinfo } from '@/api/rockpanel/type';

let leftrecord = ref('');
let rightrecord = ref('');
let lefcarinfo = ref<lefcarinfo>();
let rightcarinfo = ref<rightcarinfo>();

onMounted(() => {
  getlastRecord();
});

const getlastRecord = async () => {
  const res = await reqLine3LastRecord();
  res.data.forEach((item: any) => {
    if (item.pos === 'L2L') {
      leftrecord.value = item.eva;
      lefcarinfo.value = item;
    } else if (item.pos === 'L2R') {
      rightrecord.value = item.eva;
      rightcarinfo.value = item;
    }
  });
};
</script>

<style lang="scss" scoped>
.custom-card {
  margin: 5px 0;
}

.carlayout {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  height: 100%;

  .img {
    width: 80%;
    height: 300px;
    background: url('../../image/汽车2.png') no-repeat center center;
   
    background-size: contain;
  }

  .top{
    margin: -40px 0;
  } 
  .bottom {
    margin: -40px 0;
  }
}

.carinfo {
  position: absolute;
  top: 20px;
  left: 20px;
  display: grid;
  grid-gap: 10px;
  justify-items: start;
}
</style>
